<template>
  <div>
            <div class="headercontainer">
          <div class="title">
            <div style="flex: 0 1 30%;">
              <dv-decoration-10 style="height: 30px;" />
              <div class="current" >
                <span>{{ current }}</span>
              </div>
            </div>
            <div style="flex: 0 1 40%;">
              <!-- 这里面又分成三等分 -->
              <div class="d-flex">
                <!-- 左 -->
                <dv-decoration-8 style="width: 100px; height: 30px; flex: 1;" />
                <!-- 中 -->
                <dv-decoration-11
                  style="flex: 1; width: 100px; height: 50px; color: #fff;"
                  >智慧其力商会云</dv-decoration-11
                >
                <!-- 右 -->
                <dv-decoration-8
                  :reverse="true"
                  style="width: 100px; height: 30px; flex: 1;"
                />
              </div>
            </div>
            <div style="flex: 0 1 30%;">
              <dv-decoration-10
                style="height: 30px; transform: rotate(180deg);"
              />
              <div class="consloe" @click="inconsole">控制台</div>
              <!-- <div class="consloe" @click="inconsole">控制台</div> -->
            </div>
          </div>
        </div>
        <!-- 公司名称 -->
        <div class="conpantbox">
          <div class="conpanyTitle">重庆浙江嘉兴商会</div>
        </div>

  </div>
</template>

<script>
import { mapState } from "vuex";

export default {

 data() {
    return {
      current: "", //当前时间

    };
  },
  mounted() {},
  created() {
    this.getselectMemberNum();
    this.gettime();
  },
  computed: {
    ...mapState({
      selectMemberNum: (state) => state.bigscreen.menmberNum,
    }),
  },
  methods: {
    gettime() {
      this.gettimeInterval();

    },
    gettimeInterval() {
      // let _this = this  // 这段代码创建了一个新的变量_this,并将其设置为this值，这样即使你改变了this的值(上下文)比如一个函数，你仍然可以访问到原来的this的值
      let year = new Date().getFullYear(); // 获取当前时间的年份
      let month = new Date().getUTCMonth() + 1; // 获取当前时间的月份
      let day = new Date().getDate(); // 获取当前时间的日
      let getday = new Date().getDay();
      let week = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      let weekday = week[getday];
      //  判断当小于10的时候，在前面补0
      this.current = `${year}年${month}月${day}日: ${weekday}`;
    },
    getselectMemberNum() {
      this.$store.dispatch("bigscreen/getselectMemberNum");
    },
    inconsole() {
    this.$router.push("index");
    },

  },
}
</script>

<style lang="scss" scoped>
$color-blue: #0d3d7f;
$font-color: #09f5fc;
$text-color: #fff;
  .headercontainer {
    .title {
      display: flex;
      justify-content: space-between;
      // margin: 10rem;
      height: 30px;

      .d-flex {
        display: flex;
        margin-top: 15px;
      }

      .current {
        color: $text-color;
        //  padding: 10px;
        position: absolute;
        left: 10px;
      }
    }

    .consloe {
      color: $text-color;
      // margin-left: 4;
      position: absolute;
      right: 10px;
    }
  }
  .conpantbox {
    display: flex;
    justify-content: center;
    align-items: center;
    //  background-color:pink;
    margin-top: 40px;
    .conpanyTitle {
      width: 400px;
      height: 30px;
      line-height: 30px;
      background: url("../../assets/images/bgtitle.png") no-repeat center center;
      text-align: center;
      border-radius: 10%;
      //  font-weight: 800;
      font-size: 14px;
      background-size: 100% 100%;
      color: #00cafe;
    }
  }

</style>